<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>066_CSS_类选择器</title>
    <style>
        /* 
            css代码中只需要通过 .xxxx的方式即可对应上html标签中的class名
            .的作用就是和元素选择器区分开，你直接写question，它就跑去找question标签了，很明显html中根本没有这个标签
        */
        .question{
            color: red;
        }
        .answer{
            color: green;
        }
    </style>
</head>
<body>
    <!-- 
        现在我想让问题下的p标签文字颜色为红色，而回答下的p标签文字颜色为绿色
        显然元素选择器这时候就不行了，这时候就需要类选择器登场了 

        注意事项: 
            - 类名不要以数字开头，不要包含中文
            - 可以包含 - , _
    -->
    <h2>问题:</h2>
    <!-- 类选择器很简单，html部分直接使用class属性，值为自定义名称，这里赋值为question，然后去css代码里把 -->
    <p class="question">1. 请问1+1等于多少?</p>
    <p class="question">2. 请问1+123等于多少?</p>
    <p class="question">3. 请问1+999等于多少?</p>
    <!-- 注意的是，类选择器只匹配class值，不管标签是什么，所以下面的span样式也会改变 -->
    <span class="question">我去，我也能变红</span>

    <h2>回答:</h2>
    <p class="answer">1.  1+1等于2</p>
    <p class="answer">2.  1+123等于124</p>
    <p class="answer">3.  1+999等于1000</p>
</body>
</html>